import React, { Component } from 'react'
import Item from '../Item/Item'
import './List.css'
export default class List extends Component {
  render() {
    // 解构props
    const { todos, delTodo, updateTodo, editId, setEditId, editTodo } =
      this.props
    return (
      <ul className="todo-main">
        {/* [Item,Item,Item] */}
        {todos.map((todo) => {
          // 如果遍历的是组件,也要添加key属性.因为使用组件其实也是写成标签.也是jsx.组件实例其实也是虚拟dom
          // 每一个Item组件创建的时候,就把他所对应的任务对象传递了过去
          return (
            <Item
              key={todo.id}
              todo={todo}
              delTodo={delTodo}
              updateTodo={updateTodo}
              editId={editId}
              setEditId={setEditId}
              editTodo={editTodo}
            ></Item>
          )
        })}
      </ul>
    )
  }
}
